<template>
    <RouterView></RouterView>
    <van-tabbar v-model="active">
        <van-tabbar-item
            v-for="item in router.options.routes[0].children"
            :key="item.path"
            :icon="item.meta.icon"
            :url='`#/${item.path}`'
        >
            {{item.meta.name}}
        </van-tabbar-item>
    </van-tabbar>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { useRouter, useRoute } from 'vue-router';

const active = ref(0);// 当前页面索引
const router = useRouter();// 获取路由实例
const route = useRoute();// 获取当前路由信息

onMounted(() => {
    // console.log(router.options.routes[0].children,'router');
    // console.log(route,'route');
    const data = router.options.routes[0]; // 获取路由数据

    active.value=data.children.findIndex(item=>'/'+item.path===route.path);
})

</script>